@tailwind base;
@tailwind components;
@tailwind utilities;

/* 浅色模式变量 - 清新配色 */
:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.5;
  font-weight: 400;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  /* 清新粉蓝渐变主题变量 */
  --primary-pink: #ffb6c1; /* 更柔和的浅粉色 */
  --secondary-blue: #add8e6; /* 清新的浅蓝色 */
  --accent-purple: #e6e6fa; /* 柔和的薰衣草色 */
  --light-bg: #f8f9fa; /* 清爽的浅灰白背景 */
  --card-bg: rgba(255, 255, 255, 0.95); /* 更明亮的卡片背景 */
  --border-gradient: linear-gradient(135deg, var(--primary-pink), var(--secondary-blue));
  --text-primary: #2d3748; /* 更柔和的主文本色 */
  --text-secondary: #4a5568; /* 更柔和的次要文本色 */
  --border-color: #e2e8f0; /* 更浅的边框颜色 */
}

/* 深色模式变量 - 护眼配色 */
.dark {
  --primary-pink: #ff8fa3; /* 深色模式下柔和的粉色 */
  --secondary-blue: #90cdf4; /* 深色模式下清新的蓝色 */
  --accent-purple: #c7d2fe; /* 深色模式下柔和的紫色 */
  --light-bg: #1a202c; /* 更柔和的深色背景 - 护眼配色 */
  --card-bg: rgba(26, 32, 44, 0.95); /* 更柔和的深色卡片背景 */
  --border-gradient: linear-gradient(135deg, var(--primary-pink), var(--secondary-blue));
  --text-primary: #f7fafc; /* 更柔和的浅色文本 - 护眼配色 */
  --text-secondary: #e2e8f0; /* 更柔和的次要浅色文本 */
  --border-color: #2d3748; /* 更柔和的深色边框 */
}

/* 深色模式下的整体背景 */
.dark body {
  background-color: var(--light-bg) !important;
  color: var(--text-primary) !important;
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(255, 124, 163, 0.05) 0%, transparent 20%),
    radial-gradient(circle at 80% 30%, rgba(124, 182, 255, 0.05) 0%, transparent 30%),
    radial-gradient(circle at 40% 70%, rgba(181, 124, 255, 0.05) 0%, transparent 25%);
}

/* 深色模式下的卡片样式增强 */
.dark .bg-white {
  background-color: #1f2937 !important;
  color: var(--text-primary) !important;
}

.dark .bg-white\/80 {
  background-color: rgba(31, 41, 55, 0.8) !important;
  color: var(--text-primary) !important;
}

.dark .bg-gradient-to-r.from-pink-50.to-blue-50 {
  background-color: #1f2937 !important;
  background-image: none !important;
  color: var(--text-primary) !important;
}

.dark .border-pink-100 {
  border-color: #374151 !important;
}

.dark .text-gray-500,
.dark .text-gray-600,
.dark .text-gray-700,
.dark .text-gray-800 {
  color: var(--text-secondary) !important;
}

.dark .text-pink-500,
.dark .text-pink-400 {
  color: var(--primary-pink) !important;
}

.dark .text-blue-500,
.dark .text-blue-400 {
  color: var(--secondary-blue) !important;
}

.dark .bg-gray-100 {
  background-color: #374151 !important;
}

.dark .bg-pink-100 {
  background-color: rgba(255, 124, 163, 0.1) !important;
}

.dark .bg-blue-100 {
  background-color: rgba(124, 182, 255, 0.1) !important;
}

/* 深色模式下的按钮样式 */
.dark button.bg-gradient-to-r.from-pink-100.to-blue-100 {
  background-color: rgba(255, 124, 163, 0.1) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 124, 163, 0.3) !important;
}

.dark button.bg-gradient-to-r.from-pink-500.to-blue-500 {
  color: white !important;
}

/* 深色模式下的滚动条样式 */
.dark ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.dark ::-webkit-scrollbar-track {
  background: #1f2937;
}

.dark ::-webkit-scrollbar-thumb {
  background: #374151;
  border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: #4b5563;
}

/* 深色模式下的容器和标题 */
.dark .text-gradient {
  background: linear-gradient(90deg, var(--primary-pink), var(--secondary-blue)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* 确保深色模式应用到所有卡片元素 */
.dark .card-gradient:hover {
  box-shadow: 0 0 12px rgba(155, 208, 255, 0.4) !important;
}

/* 深色模式下的输入框 */
.dark input,
.dark textarea,
.dark select {
  background-color: #374151 !important;
  border-color: #4b5563 !important;
  color: var(--text-primary) !important;
}

.dark input:focus,
.dark textarea:focus,
.dark select:focus {
  border-color: var(--secondary-blue) !important;
  box-shadow: 0 0 0 2px rgba(124, 182, 255, 0.2) !important;
}

/* 全局样式 */
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background-color: var(--light-bg);
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(255, 155, 179, 0.05) 0%, transparent 20%),
    radial-gradient(circle at 80% 30%, rgba(155, 208, 255, 0.05) 0%, transparent 30%),
    radial-gradient(circle at 40% 70%, rgba(199, 155, 255, 0.05) 0%, transparent 25%);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 平滑滚动 */
html {
  scroll-behavior: smooth;
}

/* 确保深色模式应用到所有元素 - 增加高优先级的深色模式样式 */
.dark,
.dark * {
  color-scheme: dark;
}

/* 强制应用深色模式的body样式 */
.dark body {
  background-color: var(--light-bg) !important;
  color: var(--text-primary) !important;
}

/* 确保在应用深色模式时，所有背景色都会被覆盖 */
.dark .bg-white,
.dark .bg-gray-50,
.dark .bg-gray-100 {
  background-color: #1f2937 !important;
}

/* 确保深色模式下的文本颜色 */
.dark .text-gray-800,
.dark .text-gray-700,
.dark .text-gray-600 {
  color: var(--text-primary) !important;
}

.dark .text-gray-500,
.dark .text-gray-400 {
  color: var(--text-secondary) !important;
}

  /* 防止内容被底部导航栏遮挡 */
  .page-content {
    padding-bottom: 80px;
  }

  /* 自定义动画 */
  @keyframes float {
    0%, 100% {
      transform: translateY(0) rotate(0deg);
    }
    50% {
      transform: translateY(-20px) rotate(5deg);
    }
  }

  @keyframes spin-slow {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  /* 动画类 */
  .animate-float {
    animation: float 6s ease-in-out infinite;
  }

  .animate-float-slow {
    animation: float 8s ease-in-out infinite;
  }

  .animate-spin-slow {
    animation: spin-slow 20s linear infinite;
  }

  /* 文本阴影 */
  .text-shadow {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }

  .text-shadow-lg {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }

  /* 淡入动画 */
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fadeIn {
    animation: fadeIn 0.3s ease-out forwards;
  }

/* 居中容器布局 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  width: 100%;
}

/* 文本渐变效果 */
.text-gradient {
  background: linear-gradient(90deg, var(--primary-pink), var(--secondary-blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 按钮悬停效果 */
.btn-gradient:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 12px rgba(155, 208, 255, 0.6);
  transition: all 0.3s ease;
}

/* 卡片悬停效果 */
.card-gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 12px rgba(155, 208, 255, 0.4);
}

/* 深色模式下的组件样式调整 - 使用!important确保优先级 */
.dark .bg-white {
  background-color: #1f2937 !important;
}

.dark .bg-white\/80 {
  background-color: rgba(31, 41, 55, 0.8) !important;
}

.dark .bg-gradient-to-r.from-pink-50.to-blue-50 {
  background-color: #1f2937 !important;
  background-image: none !important;
}

.dark .border-pink-100 {
  border-color: #374151 !important;
}

.dark .text-gray-500,
.dark .text-gray-600,
.dark .text-gray-700,
.dark .text-gray-800 {
  color: var(--text-secondary) !important;
}

.dark .text-pink-500,
.dark .text-pink-400 {
  color: var(--primary-pink) !important;
}

.dark .text-blue-500,
.dark .text-blue-400 {
  color: var(--secondary-blue) !important;
}

.dark .bg-gray-100 {
  background-color: #374151 !important;
}

.dark .bg-pink-100 {
  background-color: rgba(255, 155, 179, 0.1) !important;
}

.dark .bg-blue-100 {
  background-color: rgba(155, 208, 255, 0.1) !important;
}

/* 确保深色模式覆盖所有tailwind背景类 */
.dark .bg-slate-50,
.dark .bg-slate-100,
.dark .bg-stone-50,
.dark .bg-stone-100,
.dark .bg-zinc-50,
.dark .bg-zinc-100 {
  background-color: #1f2937 !important;
}

/* 确保链接在深色模式下也能正确显示 */
.dark a {
  color: var(--secondary-blue) !important;
}

/* 确保按钮在深色模式下正确显示 */
.dark button {
  color: var(--text-primary) !important;
}